<template>
    <!-- 日历便签卡片 -->
    <el-card style="max-width: 100%" shadow="hover">
        <el-config-provider :locale="zhCn"> <!-- 中文化 -->
            <el-calendar class="time" :first-day-of-week="1">
                <!-- 自定义日期单元格，支持双击编辑备注 -->
                <template #date-cell="{ data }">
                    <div class="isEdit" @dblclick="isEdit(data.date)">
                        <p :class="data.isSelected ? 'is-selected' : ''">
                            <!-- 只显示日 -->
                            {{ data.day.split('-').slice(1)[1] }}
                        </p>
                        <!-- 编辑状态下显示输入框 -->
                        <el-input
                            v-if="isEditing[data.date]"
                            v-model="notes[data.day]"
                            class="note-input"
                            @blur="isEditing[data.date] = false"
                            @keyup.enter="isEditing[data.date] = false"
                            maxlength="15"
                            ref="inputRef"
                        />
                        <!-- 非编辑状态下显示备注 -->
                        <span v-else class="note-span">{{ notes[data.day] }}</span>
                    </div>
                </template>
            </el-calendar>
        </el-config-provider>
    </el-card>
</template>

<script setup>
// 引入 vue 相关方法
import { ref, onMounted, nextTick } from 'vue'
// 引入 Element Plus 组件
import { ElCard, ElCalendar, ElConfigProvider, ElInput, ElMessage } from 'element-plus'
// 引入国际化中文包
import zhCn from 'element-plus/es/locale/lang/zh-cn'

const notes = ref({}) // 用于存储每个日期的备注
const isEditing = ref({}) // 用于跟踪每个日期是否处于编辑状态
const inputRef = ref(null) // 用于存储当前输入框的 ref

let data1 = ref([]) // 用于存储从后端获取的数据
onMounted(() => {
    // 模拟从后端获取数据
    data1.value = [
        { date: '2025-06-01', data: '数据1' },
        { date: '2025-06-02', data: '数据2' },
        { date: '2025-06-03', data: '数据3' },
        { date: '2025-06-04', data: '数据4' },
        { date: '2025-06-05', data: '数据5' }
    ]
    // 初始化备注
    data1.value.forEach(item => {
        notes.value[item.date] = item.data
    })
})

// 双击日期单元格进入编辑状态
function isEdit(date) {
    isEditing.value[date] = true
    ElMessage.primary('最多只能输入15个字符哟!')

    // 使用 nextTick 确保 DOM 更新完成后聚焦输入框
    nextTick(() => {
        if (inputRef.value) {
            inputRef.value.focus()
        }
    })
}
</script>

<style scoped>
.time {
    font-size: 14px;
}

.date-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.isEdit {
    width: 100%;
    height: 100%;
}

.is-selected {
    color: #1989fa;
}

.note-input {
    width: 100%;
    margin-top: 8px;
    font-size: 10px;
}

.note-span {
    margin-top: 8px;
    color: #666;
    font-size: 10px;
    white-space: normal;
    overflow: hidden;
    width: 100%;
    display: block;
    word-wrap: break-word;
}
</style>